<template>
  <div class="side-left-right">
    <div class="item-plane">
      <div class="item_2">
        <div class="box-parent">
          <div class="head">
            <span class="title">监控设备统计</span>
          </div>
          <div class="box">
            <div class="box1">
              <div class="box1-2">
                <span class="value">40
                  <span class="unit">个</span>
                </span>
                <span class="title">总数</span>
              </div>
            </div>
            <div class="box1">
              <div class="box1-2">
                <span class="value2">10
                  <span class="unit">个</span>
                </span>
                <span class="title">在线</span>
              </div>
            </div>
            <div class="box1">
              <div class="box1-2">
                <span class="value3">10
                  <span class="unit">个</span>
                </span>
                <span class="title">离线</span>
              </div>
            </div>
            <div class="box2">
              <span class="title">设备占比</span>
              <piechartKj3D class="chartsGl" :datalist="pieData" width="260px" height="105px"></piechartKj3D>
              <div class="box2-2">
                <div class="box2-2-1">
                  <span class="title2">在线</span>
                  <span class="title3">90</span>
                  <span class="title4">70%</span>
                </div>
                <div class="box2-2-2">
                  <span class="title2">离线</span>
                  <span class="title3">10</span>
                  <span class="title4">70%</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item_3">
        <div class="box-parent">
          <div class="head">
            <span class="title">电子巡查</span>
          </div>
          <div class="box">
            <div class="box1">
              <span class="title">养老院巡查路线24年秋季</span>
            </div>
            <div class="box2">
              <div class="box2-1"></div>
            </div>
            <div class="box3" @click="patrol">
              <span class="title">巡查</span>
            </div>
            <div class="box4">
              <div class="one">
                <div class="title">巡查任务：</div>
                <div class="value">电子巡查河道及周边地区，保证河道周围 无其他安全隐患。</div>
              </div>
              <div class="one">
                <div class="title">联系人：</div>
                <div class="value">张三，李四</div>
              </div>
              <div class="one">
                <div class="title">联系电话：</div>
                <div class="value">1760652****</div>
              </div>
            </div>
            <div class="box5">
              <div class="logo1">
                <span class="title">第一视角人称</span>
              </div>
            </div>
            <div class="box6">
              <div ref="pieChart" class="chart"> </div>
              <div class="logo1">
                <span class="title">巡查进度</span>
              </div>
              <div class="right">
                <span class="title">巡查点</span>
                <span class="value1">4<span class="value2">/</span><span class="value3">23</span></span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item_4">
        <div class="box-parent">
          <div class="head">
            <span class="title">监控列表</span>
          </div>
          <div class="box">
            <div class="m-list">
              <div class="boxinfo">
                <s-list ref="reflst1" :itemStl="itemStl" :headStl="headStl" :head="dtjHead" :rows="dtjDts"
                  :has-search="false"></s-list>
              </div>
            </div>
            <div class="btnList">
              <div class="btn1" :class="{ active: currentTab === 'monitorList' }" @click="changeTab('monitorList')">
                <span class="title">监控列表</span>
              </div>
              <div class="btn1" :class="{ active: currentTab === 'monitorGroup' }" @click="changeTab('monitorGroup')">
                <span class="title">监控组</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 中间弹窗 -->
  <transition name="animate__animated animate__bounce" enter-active-class="animate__zoomIn"
    leave-active-class="animate__zoomOut">
    <div v-if="goDetail" class="messageBox">
      <div class="head">
        <span class="title">监控画面</span>
      </div>
      <span class="ktBtn pbtn" @click="btnclose"></span>
      <div class="box">
        <div class="box1">
          <span class="title1">XX监控</span>
          <span class="title1">192.168.1.67</span>
        </div>
        <div class="box1">
          <span class="title1">XX监控</span>
          <span class="title1">192.168.1.67</span>
        </div>
        <div class="box1">
          <span class="title1">XX监控</span>
          <span class="title1">192.168.1.67</span>
        </div>
        <div class="box1">
          <span class="title1">XX监控</span>
          <span class="title1">192.168.1.67</span>
        </div>
      </div>
    </div>
  </transition>

</template>
<script setup>
import sList from "cmpt/table.vue";
import vChart from "mChart/chart.vue";
import apis from '@/api/indexapi.js';
import piechartKj3D from "../../components/chart/chartPie.vue";
const searchBarStyle = "margin: 0 auto;margin-top: 10px;width:100%;height:32px";
//请求的实例
const _api = apis();
const btnclose = () => {
  goDetail.value = false;
}
//弹窗控制
const goDetail = ref(false);
//巡查点击事件
const patrol = () => {
  goDetail.value = true;
}
const chart2 = ref(null);
import * as echarts from 'echarts';
const datState1 = ref({})
import { ref, watch, onMounted } from 'vue';
const pieData = ref([
  { name: "在线", value: 16, itemStyle: { color: '#49A5F7' } },
  { name: "离线", value: 12, itemStyle: { color: '#F87352' } },
]);
//当前选中
const currentTab = ref('monitorList');
const changeTab = (tabName) => {
  currentTab.value = tabName;
  fetchData(); // 请求新数据
}
const fetchData = () => {
  // 根据currentTab获取对应数据
  if (currentTab.value === 'monitorList') {
    dtjHead.value = [
      listHead("name", "名称", null, null, "rgb(99, 99, 99)", false, '#444E57', 'FZHZGBJWGB10', "17px"),
      listHead("num", "编号", '150px', null, "rgb(99, 99, 99)", false, '#444E57', 'FZHZGBJWGB10', "17px"),
      listHead("state", "状态", null, null, "rgb(99, 99, 99)", false, '#444E57', 'FZHZGBJWGB10', "17px"),
      listHead("controller", "操作", null, null, (item) => {
        hOnFn("hToFlo", item.id)
      }, "rgb(99, 99, 99)", false, '#444E57', 'FZHZGBJWGB10', "17px"),
    ];
    // 原始数据
    const rawData = [
      { id: 123, name: "监控1", num: "r3465477", state: "在线" },
      { id: 124, name: "监控2", num: "r3465478", state: "离线" },
      { id: 125, name: "监控3", num: "r3465479", state: "在线" },
      { id: 126, name: "监控4", num: "r3465480", state: "在线" },
      { id: 127, name: "监控5", num: "r3465481", state: "离线" },
      { id: 128, name: "监控6", num: "r3465482", state: "在线" },
      { id: 129, name: "监控7", num: "r3465483", state: "离线" },
    ];
    dtjDts.value = rawData.map(item => ({
      ...item,
      controller: `<button class='location' data-id='${item.id}'>定位</button><button class='control' data-id='${item.id}'>控制</button>`
    }));
  } else {
    dtjHead.value = [
      listHead("name", "组名", null, null, "rgb(99, 99, 99)", false, '#444E57', 'FZHZGBJWGB10', "17px"),
      listHead("num", "监控数量", '150px', null, "rgb(99, 99, 99)", false, '#444E57', 'FZHZGBJWGB10', "17px"),
      listHead("remark", "备注", null, null, "rgb(99, 99, 99)", false, '#444E57', 'FZHZGBJWGB10', "17px"),
    ];
    // 请求监控组数据的API
    dtjDts.value = [
      { name: "监控组1", num: "6", remark: "XXX" },
      { name: "监控组1", num: "6", remark: "XXX" },
      { name: "监控组1", num: "6", remark: "XXX" },
      { name: "监控组1", num: "6", remark: "XXX" },
      { name: "监控组1", num: "6", remark: "XXX" },
      { name: "监控组1", num: "6", remark: "XXX" },
    ]
  }
}

// 饼图容器的引用
const pieChart = ref(null);
onMounted(() => {
  const chart = echarts.init(pieChart.value);
  const option = {
    series: [{
      name: '告警统计',
      type: 'pie',
      radius: ['60%', '50%'], // 设置饼图大小
      center: ['40%', '60%'],
      labelLine: {  //删除指示线
        show: false
      },
      data: [{
        value: 75,
        itemStyle: {
          color: '#35E384'
        }
      },
      {
        value: 25,
        itemStyle: {
          color: 'rgba(0, 0, 0, 0)'
        }
      }
      ]
    }],
    graphic: [{
      type: 'group',
      left: '35px',
      top: '45px',
      children: [
        {
          type: 'text',
          left: 'center',
          top: 0,
          style: {
            text: 60 + "%",
            fontFamily: 'Adobe Heiti Std',
            fontWeight: 'normal',
            fontSize: 13,
            fill: '#35E384',
            lineHeight: 21,
            fontStyle: 'italic',
            width: 24,
            height: 20,
            background: 'linear-gradient(0deg, #FF9C9C 0%, #FF1515 100%)',
            // 让背景应用到文字上
            backgroundClip: 'text',
            textFill: 'transparent',
            align: 'center',
          }
        }
      ]
    }]
  };
  chart.setOption(option);
});
watch(() => {
  if (chart2.value && typeof chart2.value.setDat === 'function') {
    chart2.value.setDat(datState2);
  }
})

function listHead(k, v, w, icon, ev, s, color) {
  return {
    k,
    v,
    w,
    icon: icon || null,
    click: ev || null,
    sort: s,
    color: color || null
  };
}
const dtjHead = ref([]);
const dtjDts = ref([]);
//外层绑定@onFn="hOnFn"
const emit = defineEmits(['callOut']);
//触发
const hOnFn = (t) => {
  emit('callOut', t);
}
//表头样式
const headStl = "width: 100%;height: 30px;background: #4f9df4;border-radius: 6px;"
//表格样式
const itemStl = "border-radius: 6px;font-size:14px;width: 100%;height: 30px;margin-top: 4px;background: rgb(219, 229, 244);opacity: 0.75;"
dtjHead.value = [
  listHead("name", "名称", null, null, "rgb(99, 99, 99)", false, '#444E57', 'FZHZGBJWGB10', "17px"),
  listHead("num", "编号", '150px', null, "rgb(99, 99, 99)", false, '#444E57', 'FZHZGBJWGB10', "17px"),
  listHead("state", "状态", null, null, "rgb(99, 99, 99)", false, '#444E57', 'FZHZGBJWGB10', "17px"),
  listHead("controller", "操作", null, null, (item) => {
    hOnFn("hToFlo", item.id)
  }, "rgb(99, 99, 99)", false, '#444E57', 'FZHZGBJWGB10', "17px"),
];
// 初始化时也用动态controller
const rawData = [
  { id: 123, name: "监控1", num: "r3465477", state: "在线" },
  { id: 124, name: "监控2", num: "r3465478", state: "离线" },
  { id: 125, name: "监控3", num: "r3465479", state: "在线" },
  { id: 126, name: "监控4", num: "r3465480", state: "在线" },
  { id: 127, name: "监控5", num: "r3465481", state: "离线" },
  { id: 128, name: "监控6", num: "r3465482", state: "在线" },
  { id: 129, name: "监控7", num: "r3465483", state: "离线" },
];
dtjDts.value = rawData.map(item => ({
  ...item,
  controller: `<button class='location' data-id='${item.id}'>定位</button><button class='control' data-id='${item.id}'>控制</button>`
}));
const test = (e) => {
  if (e.target.className === 'location') {
    // alert('点击了定位，id: ' + e.target.dataset.id);
    // TODO: 这里写定位的具体逻辑
  }
  if (e.target.className === 'control') {
    // alert('点击了控制，id: ' + e.target.dataset.id);
    // TODO: 这里写控制的具体逻辑
  }
}
onMounted(() => {
  document.addEventListener('click', test)
})
watch(dtjDts, (newVal) => {
  console.log('dtjDts updated:', newVal);

});
</script>

<style scoped lang="scss">
.messageBox {
  position: absolute;
  left: 276px;
  bottom: 250px;
  width: 1026px;
  height: 246px;
  background-image: url("/imgs/jk/矩形 1@2x(2).png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  margin-top: 40px;
  flex-direction: row;

  .head {
    width: 400px;
    display: flex;
    height: 45px;
    position: relative;
    top: -26px;
    background-image: url("/imgs/nindex/title.png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .title {
      margin-top: 5px;
      margin-left: 60px;
      font-family: YouSheBiaoTiHei;
      font-weight: 400;
      font-size: 27px;
      color: #FFFFFF;

    }
  }

  .box {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;

    .box1 {
      display: flex;
      justify-content: space-around;
      margin-top: 30px;
      margin-left: 13px;
      width: 240px;
      height: 200px;
      background-image: url("/imgs/jk/组 1730.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .title1 {
      margin-top: 5px;
    }
  }

  .ktText {
    position: absolute;
    top: 15px;
    left: 200px;
    font-family: FZCuYuan-M03S;
    font-weight: 400;
    font-size: 18px;
    color: #fefefe;
  }

  .ktBtn {
    z-index: 999;
    position: absolute;
    top: 11px;
    right: 21px;
    width: 20px;
    height: 16px;
    background-image: url(/imgs/AirConditioner/hid_icon.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
  }
}


.side-left-right {
  padding: 0;
}

.item-plane {
  display: flex;
  justify-content: space-between;
  padding: 0px 0px 0px 0px !important;
  height: calc(100% - 40px) !important;
  margin-bottom: 40px;
}

.item_2 {
  height: 11%;

  .box-parent {
    padding: 0 25px 0 25px;
    margin-top: 40px;
    // display: flex;
    flex-direction: row;
    height: 262px;
    background-image: url('/imgs/jk/矩形 1.png');
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .head {
      display: flex;
      height: 45px;
      position: relative;
      top: -26px;
      background-image: url("/imgs/nindex/title.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .title {
        margin-top: 5px;
        margin-left: 80px;
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        font-size: 27px;
        color: #FFFFFF;

      }
    }

    .box {
      top: -14px;
      display: flex;
      flex-wrap: wrap;
      position: relative;
      justify-content: center;
      align-items: center;
      gap: 5px;

      .box2 {
        width: 100%;
        margin-top: 0px;
        height: 120px;
        display: flex;
        background-image: url("/imgs/nindex/组 1728.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        align-items: center;

        .chartsGl {
          height: 105px;
          width: 210px !important;
        }

        .title {
          top: 95px;
          left: 51px;
          position: absolute;
          font-family: Adobe Heiti Std;
          font-weight: normal;
          font-size: 17px;
          color: #FFFFFF;
          opacity: 0.8;
        }

        .box2-2 {
          margin-top: 60px;
          display: flex;
          width: 100px;
          height: 100px;
          flex-wrap: wrap;
          flex-direction: column;

          .box2-2-1 {
            display: flex;
            width: 500px;
            margin-top: 10px;
            background-image: url("/imgs/nindex/组 1722.png");
            background-position: left;
            background-repeat: no-repeat;

            .title2 {
              margin-left: 30px;
              font-family: Adobe Heiti Std;
              font-weight: normal;
              font-size: 15px;
              color: #2A2E3E;
              line-height: 20px;
            }

            .title3 {
              margin-left: 44px;
              font-family: DIN1451EF EngNeu;
              font-weight: 400;
              font-size: 30px;
              color: #58AFF6;
              line-height: 20px;
            }

            .title4 {
              margin-left: 24px;
              font-family: DIN1451EF EngNeu;
              font-weight: 400;
              font-size: 30px;
              color: #58AFF6;
              line-height: 20px;
            }
          }

          .box2-2-2 {
            display: flex;
            width: 500px;
            margin-top: 10px;
            background-image: url("/imgs/nindex/组 1722 拷贝.png");
            background-position: left;
            background-repeat: no-repeat;

            .title2 {
              margin-left: 30px;
              height: 14px;
              font-family: Adobe Heiti Std;
              font-weight: normal;
              font-size: 15px;
              color: #2A2E3E;
              line-height: 20px;
            }

            .title3 {
              margin-left: 44px;
              font-family: DIN1451EF EngNeu;
              font-weight: 400;
              font-size: 30px;
              color: #FF8961;
              line-height: 20px;
            }

            .title4 {
              margin-left: 24px;
              font-family: DIN1451EF EngNeu;
              font-weight: 400;
              font-size: 30px;
              color: #FF8961;
              line-height: 20px;
            }
          }

        }
      }

      .box1 {
        width: 150px;
        height: 90px;
        display: flex;
        background-image: url("/imgs/jk/矩形 686(1).png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        // justify-content: space-between;
        align-items: center;

        .box1-2 {
          margin-left: 30px;
          display: flex;
          flex-direction: column;
          background-position: left;
          background-size: 100% 100%;
          background-repeat: no-repeat;

          .title {
            font-family: Adobe Heiti Std;
            font-weight: normal;
            font-size: 15px;
            color: #2A2E3E;
            line-height: 23px;
            opacity: 0.8;
          }

          .value {
            height: 29px;
            font-family: DIN1451EF EngNeu;
            font-weight: 400;
            font-size: 37px;
            color: #FFA200;
            line-height: 25px;

            .unit {
              width: 12px;
              font-family: Adobe Heiti Std;
              font-weight: normal;
              font-size: 13px;
              color: #2A2E3E;
              line-height: 23px;
              opacity: 0.5;
            }
          }

          .value2 {
            height: 29px;
            font-family: DIN1451EF EngNeu;
            font-weight: 400;
            font-size: 37px;
            color: #218CFF;
            line-height: 25px;

            .unit {
              width: 12px;
              font-family: Adobe Heiti Std;
              font-weight: normal;
              font-size: 13px;
              color: #2A2E3E;
              line-height: 23px;
              opacity: 0.5;
            }
          }

          .value3 {
            height: 29px;
            font-family: DIN1451EF EngNeu;
            font-weight: 400;
            font-size: 37px;
            color: #F1774D;
            line-height: 25px;

            .unit {
              width: 12px;
              font-family: Adobe Heiti Std;
              font-weight: normal;
              font-size: 13px;
              color: #2A2E3E;
              line-height: 23px;
              opacity: 0.5;
            }
          }

          .value4 {
            height: 29px;
            font-family: DIN1451EF EngNeu;
            font-weight: 400;
            font-size: 37px;
            color: #DA61AB;
            line-height: 25px;

            .unit {
              width: 12px;
              font-family: Adobe Heiti Std;
              font-weight: normal;
              font-size: 13px;
              color: #2A2E3E;
              line-height: 23px;
              opacity: 0.5;
            }
          }

        }
      }
    }
  }
}

.item_3 {
  height: 23%;

  .box-parent {
    padding: 0 25px 0 25px;
    margin-top: 30px;
    // display: flex;
    flex-direction: row;
    height: 374px;
    background-image: url('/imgs/jk/矩形 1.png');
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .head {
      display: flex;
      height: 45px;
      position: relative;
      top: -26px;
      background-image: url("/imgs/nindex/title.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .title {
        margin-top: 5px;
        margin-left: 80px;
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        font-size: 27px;
        color: #FFFFFF;

      }
    }

    .box {
      top: -14px;
      display: flex;
      flex-wrap: wrap;
      position: relative;
      justify-content: center;
      align-items: center;
      gap: 5px;


      .box1 {
        width: 311px;
        height: 33px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: url("/imgs/jk/矩形 535 拷贝 16.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        align-items: center;

        .title {
          font-family: Adobe Heiti Std;
          font-weight: normal;
          font-size: 17px;
          color: #254B8E;
          line-height: 30px;
          opacity: 0.8;
        }
      }

      .box2 {
        width: 36px;
        height: 33px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: url("/imgs/jk/矩形 535 拷贝 3.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        align-items: center;

        .box2-1 {
          width: 13px;
          height: 13px;
          background-image: url("/imgs/jk/三角形 1(1).png");
          background-position: left;
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }
      }

      .box3 {
        width: 103px;
        height: 33px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: url("/imgs/jk/矩形 535 拷贝 4.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        align-items: center;

        .title {
          font-family: YouSheBiaoTiHei;
          font-weight: 400;
          font-size: 18px;
          color: #FFFFFF;
          line-height: 51px;
        }
      }

      .box4 {
        width: 100%;
        display: flex;
        justify-content: center;
        background-image: url("/imgs/jk/矩形 535 拷贝 5.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        flex-direction: column;


        .one {
          align-items: baseline;
          display: flex;
          padding: 5px;

          .title {
            width: 100px;
            font-family: Adobe Heiti Std;
            font-weight: normal;
            font-size: 15px;
            color: #254B8E;
            line-height: 30px;
            opacity: 0.8;
          }

          .value {
            font-family: Adobe Heiti Std;
            font-weight: normal;
            font-size: 15px;
            color: #254B8E;
            line-height: 30px;
            opacity: 0.8;
          }

        }
      }

      .box5 {
        display: flex;
        height: 126px;
        width: 238px;
        background-image: url("/imgs/jk/矩形 535 拷贝 5(1).png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .logo1 {

          position: relative;
          top: 103px;
          height: 23px;
          width: 171px;
          background-image: url("/imgs/jk/矩形 12.png");
          background-position: left;
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }

        .title {
          margin-left: 10px;
          font-family: YouSheBiaoTiHei;
          font-weight: 400;
          font-size: 17px;
          color: #FFFFFF;
          line-height: 24px;
          text-shadow: 0px 1px 4px rgba(41, 56, 89, 0.73);
          background: linear-gradient(180deg, rgba(233, 249, 255, 0.5) 0%, rgba(130, 177, 255, 0.5) 100%);
          -webkit-background-clip: text;
        }
      }

      .box6 {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        height: 126px;
        width: 217px;
        background-image: url("/imgs/jk/矩形 535 拷贝 5.png");
        background-position: left;
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .chart {
          width: 60%;
          height: 70%;

        }

        .logo1 {
          position: relative;
          top: 15px;
          height: 23px;
          width: 171px;
          background-image: url("/imgs/jk/矩形 12.png");
          background-position: left;
          background-size: 100% 100%;
          background-repeat: no-repeat;

          .title {
            margin-left: 10px;
            font-family: YouSheBiaoTiHei;
            font-weight: 400;
            font-size: 17px;
            color: #FFFFFF;
            line-height: 24px;
            text-shadow: 0px 1px 4px rgba(41, 56, 89, 0.73);
            background: linear-gradient(180deg, rgba(233, 249, 255, 0.5) 0%, rgba(130, 177, 255, 0.5) 100%);
            -webkit-background-clip: text;
          }
        }

        .right {
          position: relative;
          left: -50px;
          top: 20px;
          height: 23px;
          display: flex;
          flex-direction: column;

          .title {
            height: 16px;
            font-family: Adobe Heiti Std;
            font-weight: normal;
            font-size: 17px;
            color: #2A2E3E;
            line-height: 30px;
          }

          .value1 {
            margin-top: 10px;
            width: 65px;
            height: 23px;
            font-family: DIN1451EF EngNeu;
            font-weight: 400;
            font-size: 32px;
            color: #1FBA38;
            line-height: 38px;

            .value2 {
              margin-left: 10px;
              width: 65px;
              height: 23px;
              font-family: DIN1451EF EngNeu;
              font-weight: 400;
              font-size: 32px;
              color: #7398DA;
              line-height: 38px;
            }

            .value3 {
              margin-left: 10px;
              width: 65px;
              height: 23px;
              font-family: DIN1451EF EngNeu;
              font-weight: 400;
              font-size: 32px;
              color: #7398DA;
              line-height: 38px;
            }
          }
        }

      }

    }
  }
}

.item_4 {
  height: 30%;

  .box-parent {
    padding: 0 25px 0 25px;
    margin-top: 18px;
    flex-direction: row;
    height: 240px;
    background-image: url('/imgs/jk/矩形 1.png');
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .head {
      display: flex;
      height: 45px;
      position: relative;
      top: -26px;
      background-image: url("/imgs/nindex/title.png");
      background-position: left;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .title {
        margin-top: 5px;
        margin-left: 80px;
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        font-size: 27px;
        color: #FFFFFF;

      }
    }

    .box {
      top: -14px;
      position: relative;
      height: 374px;
      width: 100%;
      position: relative;

      .btnList {
        position: relative;
        display: flex;
        flex-direction: row;
        top: -233px;
        right: 6px;
        float: right;

        .btn1 {
          margin-left: 5px;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 90px;
          height: 30px;
          background-image: url("/imgs/jk/矩形 535 拷贝 12(2).png");
          background-position: left;
          background-size: 100% 100%;
          background-repeat: no-repeat;

          .title {
            font-family: Adobe Heiti Std;
            font-weight: normal;
            font-size: 17px;
            color: #2A2E3E;
            line-height: 23px;
            opacity: 0.8;
          }
        }

        /* 激活状态样式 */
        .btn1.active {
          background-image: url("/imgs/jk/矩形 535 拷贝 12(1).png");
          background-position: left;
          background-size: 100% 100%;
          background-repeat: no-repeat;

          .title {
            font-family: Adobe Heiti Std;
            font-weight: normal;
            font-size: 17px;
            color: #FFFFFF;
            line-height: 23px;
            opacity: 0.8;
          }
        }
      }

      .m-list {
        display: flex;
        flex-wrap: wrap;
        height: 50%;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center;

        .boxinfo {
          width: 100%;
        }
      }
    }
  }
}
</style>